<template>

  <div id="categoryList" class="categoryList">
    <!-- header -->
    <yd-navbar slot="navbar" fixed>
      <a @click="$router.go(-1)" slot="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </a>
      <span slot="center" style="font-size:18px">分类管理</span>
    </yd-navbar>

    <!-- content -->
    <div class="content-categoryList" fixed>
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left">选择分类：</span>
          <div class="block" slot="right">
            <el-cascader placeholder="搜索分类" :options="items" filterable change-on-select v-model.trim="categoryId"></el-cascader>
          </div>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">修改分类名：</span>
          <yd-input slot="right" v-model.trim="categoryName"></yd-input>
        </yd-cell-item>
      </yd-cell-group>
      <yd-button size="large" @click.native="add" bgcolor="#2196f3" color="#fff">提交</yd-button>
    </div>
  </div>
</template>

<script>
  import axios from '../../axios'
  import baseService from '../../axios/'

  export default {
    name: 'categoryList',
    data() {
      return {

        categoryId: '',
        categoryName: '',
        // items: []
        items: [{
            value: 'fuzhuang',
            label: '服装',
            children: [{
                value: 'nanzhuang',
                label: '男装'
              },
              {
                value: 'nvzhuang',
                label: '女装'
              },
              {
                value: 'tongzhuang',
                label: '童装'
              },
              {
                value: 'qinglvzhuang',
                label: '情侣装'
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
          {
            value: 'xiemaoxiangbao',
            label: '鞋帽箱包',
            children: [{
                value: 'xielei',
                label: '鞋类'
              },
              {
                value: 'xiangbao',
                label: '箱包'
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }

            ]
          },
          {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
                    {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
                    {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
                    {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
                    {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
                    {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
                    {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
          {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
                    {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
                    {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          }
        ]
      }
    },
    mounted() {
      this.getDeepCategory()
    },
    methods: {
      getDeepCategory() {
        let param = new URLSearchParams();
        param.append("categoryId", 1);
        baseService.post('/product/getCategory.do', param).then((res) => {
          if (res.data.status == 0) {
            let myData = res.data.data;
            let length = myData.length;

            for (let i = 0; i < length; i++) {
              // console.log(this.items[i]);
              // this.items[i].append("value");
              // this.items[i].append("label");
              // console.log(this.items[i]);
              this.items[i].value = myData[i].id;
              this.items[i].label = myData[i].name;
              console.log(this.items[i]);
              let categoryid = myData[i].id;

              let newParam = new URLSearchParams();
              newParam.append("categoryId", categoryid);
              baseService.post('/product/getCategory.do', newParam).then((res) => {
                if (res.data.status == 0) {
                  let newData = res.data.data;
                  let newLength = newData.length;
                  // console.log(newData);
                  // console.log(`二级分类长度= ${newLength} `);
                  for (let j = 0; j < newLength; j++) {
                  this.items[i].children[j].value = newData[j].id;
                  this.items[i].children[j].label = newData[j].name;
                  // console.log(this.items[i].children);
                  }
                }
              })

            }
          }
        })

      },
      add: function () {
        let param = new URLSearchParams();
        let length = this.categoryId.length;
        console.log(this.categoryId);
        console.log(this.categoryId[length--]);
        let newCategoryId = this.categoryId[length];
        let categoryName = this.categoryName;
        param.append("categoryId", newCategoryId);
        param.append("categoryName", categoryName);
        baseService.post('/manage/category/setCategoryName.do', param).then((res) => {
          this.getDeepCategory();
          if (res.data.status == 10) {
            this.$dialog.alert({
              mes: res.data.data
            });
            this.$router.push({
              path: '/user/login'

            })
          }
          else{
            this.$dialog.alert({
              mes: res.data.data
            });
          }
        })
      }

    }
  }

</script>

<style>
  .categoryList .content-categoryList {
    position: fixed;
    padding-top: 13%;
    height: 100%;
    width: 100%;
    /*overflow-y: auto !important;*/
  }

  .categoryList .el-cascader__label {
    line-height: 50px;
  }

</style>
